.media-library__list-item {
	position: relative;
	display: inline-block;
	cursor: pointer;
	color: var( --color-neutral-40 );
	user-select: none;

	&.is-selected::after {
		content: attr( data-selected-number ) '';
		position: absolute;
			right: 8px;
			bottom: 18px;
		z-index: z-index( '.media-library__list-item', '.media-library__list-item.is-selected::after' );
		width: 28px;
		height: 28px;
		padding: 0;
		transition: color 90ms ease;
		box-shadow: 0 0 8px rgba( var( --color-neutral-70-rgb ), 0.4 );
		background: var( --color-accent );
		border-radius: 50%;
		font-size: 14px;
		line-height: 28px;
		text-align: center;
		color: var( --color-text-inverted );
	}
	
	.media__main-section .media-library__content.has-no-upload-button & {
		// In the Media Library, don't allow contributors to click images.
		pointer-events: none;
	}
}

.media-library__list-item-selected-icon {
	display: none;
}

.media-library__list-item-selected-icon .gridicon {
	position: absolute;
		bottom: 22px;
		right: 12px;
	z-index: z-index(
		'.media-library__list-item',
		'.media-library__list-item-selected-icon .gridicon'
	);
	fill: var( --color-text-inverted );
}

.media-library.is-single .media-library__list-item.is-selected::after {
	content: '';
}

.media-library.is-single
	.media-library__list-item.is-selected
	.media-library__list-item-selected-icon {
	display: block;
}

.media-library__list-item-figure {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 100%;
	background-color: var( --color-neutral-10 );
}

.media-library__list-item:hover .media-library__list-item-figure {
	box-shadow: 0 0 0 1px var( --color-neutral-light ), 0 2px 4px var( --color-neutral-10 );
}

.media-library__list-item.is-selected .media-library__list-item-figure {
	box-shadow: 0 0 0 2px var( --color-accent ), 0 4px 6px var( --color-neutral-10 );
}

.media-library__list-item.is-placeholder .media-library__list-item-figure {
	background-color: var( --color-neutral-10 );
	animation: loading-fade 1.6s ease-in-out infinite;
}

.media-library__list-item.is-transient .media-library__list-item-figure::after {
	content: '';
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	background-color: rgba( var( --color-surface-rgb ), 0.75 );
	border-radius: 0;
	z-index: z-index(
		'.media-library__list-item',
		'.media-library__list-item.is-transient .media-library__list-item-figure::after'
	);
}

.media-library__list-item-spinner {
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate( -50%, -50% );
	z-index: z-index( '.media-library__list-item', '.media-library__list-item-spinner' );
}

.media-library__list-item-spinner .spinner__border {
	fill: transparent;
}

.media-library__list-item-centered {
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate( -50%, -50% );
}

.media-library__list-item-icon {
	display: block;
	font-size: inherit;
}

.media-library__list-item-icon .gridicon {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
}
